<!Doctype html>
<html>
<head>
<title>html5播放器 支持audio mp3</title>
<meta charset="utf-8" />
<style>
body{font:12px/1.5 tahoma,arial,宋体b8b\4f53,sans-serif;background:#EDEDED;margin:0;padding:0;}
.fYHei{font-family:"Microsoft YaHei","Microsoft JhengHei",STHeiti,Georgia;}
#playerTool{height:50px;width:320px;position:relative;margin:0 auto;padding:6px 0 0 160px;}
#duration{position:absolute;right:120px;top:26px;color:#aaa;}
#songName{position:absolute;left:0;top:10px;color:#666;}
#songList{background: url(http://img.xiami.com/res/img/default/nico_sprite.gif) 0 -194px no-repeat;width: 16px;height: 16px;display:block;position:absolute;right:0;cursor:pointer;}
#songList:hover{background-position:0 -226px;}
#playerTool a{display:block;text-indent:-9999px;float:left;}
#prevBtn,#playBtn,#nextBtn,.paused{background:url(http://img.xiami.com/res/img/default/msn/control_btns.png) no-repeat scroll;}
#prevBtn{height:32px;width:33px;background-position:0 -7px;margin:5px 0 0;}
#prevBtn:hover{background-position:0 -52px;}
#prevBtn:active{background-position:0 -96px;}
#playBtn{height:45px;width:45px;background-position:-114px 0;margin:0 4px;}
#playBtn:hover{background-position:-114px -45px;}
#playBtn:active{background-position:-114px -89px;}
.paused{background-position:-35px 0 !important;}
.paused:hover{background-position:-35px -45px !important;}
.paused:active{background-position:-35px -89px !important;}
#nextBtn{height:32px;width:33px;background-position:-81px -7px;margin:5px 0 0;}
#nextBtn:hover{background-position:-81px -52px;}
#nextBtn:active{background-position:-81px -96px;}
.progress_bar,.base_left,.base_right{display:block;height:9px;}
.progress_bar{background:url(http://www.xiami.com/res/img/default/msn/base.png) repeat-x;position:relative;z-index:1;margin:0 auto;}
.progress_bar .base_left,.progress_bar .base_right{position:absolute;height:9px;width:10px;top:0;}
.progress_bar .base_left{background:url(http://www.xiami.com/res/img/default/msn/base-left.png) no-repeat;left:-10px;}
.progress_bar .base_right{background:url(http://www.xiami.com/res/img/default/msn/base-right.png) no-repeat;right:-10px;}
#play_progress{display:block;height:8px;background:url(http://www.xiami.com/res/img/default/msn/bar.png) repeat-x;position:absolute;left:0;top:0;z-index:3;}
#play_progress .bar_left,#play_progress .bar_right{position:absolute;height:8px;width:10px;}
#play_progress .bar_left{background:url(http://www.xiami.com/res/img/default/msn/bar-left.png) no-repeat;left:-10px;}
#play_progress .bar_right{background:url(http://www.xiami.com/res/img/default/msn/bar-right.png) no-repeat;right:-10px;}
#load_progress{display:none;}
.volume_control{width:100px;position:absolute;left:50%;margin-left:80px;top:2px;}
.play_control a,.volume_control a{display:block;text-indent:-9999px;float:left;}
#vol_btn{background:url("http://www.xiami.com/res/img/default/msn/vol_btn.png") no-repeat scroll 0 0;height:13px;width:14px;margin:3px 5px 0 10px;}
#vol_btn:hover{background-position:0 -13px;}
.muted{background-position:0 -26px !important;}
#volume{background:#ddd;float:left;width:50px;position:relative;margin:8px 0 0;}
#current_volume{position:absolute;left:0;top:0;background:#999;}
#volume,#volume *{cursor:pointer;}
#volume_holder{display:block;background:#999;position:absolute;right:0;_right:-2px;top:-3px;_top:-6px;width:3px;height:9px;}
.slider{background:#ddd;float:left;width:50px;position:relative;display:block;height:3px;margin:8px 0 0;}
.handle{display:block;background:url('http://img.xiami.com/res/img/default/msn/v.png') repeat 0 0;position:absolute;top:-3px;width:9px;height:9px;cursor:move;}
.progress{position:absolute;top:0;background:#999;display:block;height:3px;overflow:hidden;width:100%;}
</style>
</head>
<body>
<div id="playerTool">
	<a href="javascript:void(0);" id="prevBtn" title="" ></a>
	<a href="javascript:void(0);" id="playBtn" title="" ></a>
	<a href="javascript:void(0);" id="nextBtn" title="" ></a>
	<span id="duration"></span>
	<span id="songName"></span>
	<span id="songList" onclick="showPlist();"></span>
</div>
<div class="progress_bar">
	<b class="base_left"></b>
		<i id="play_progress" style="width:0%"><b class="bar_left"></b><b class="bar_right"></b></i>
		<b id="load_progress" style="width:0%"></b>
	<b class="base_right"></b>
</div>
<div class="volume_control">
	<a href="javascript:void(0)" id="vol_btn"></a>
	<div class="slider">
		<div class="progress" id="pro" style="width: 0%; "></div>
		<a href="#" class="handle" style="left: 0px; "></a>
	</div>
</div>
<script type="text/javascript" src="http://flyxiang.org/dev/project/cwAdmin/js/cw.min.js"></script><script>
	var songList = [];
	var ss;
	var player = function(){
		this.ado = new Audio();
	}
	player.prototype = {
		_$$: function(id){
			return document.getElementById(id);
		},
		_two: function(s) {
				s += "";
				if (s.length < 2) s = "0" + s;
				return s;
		},
		_Time: function(t){	
			t = Math.round(t);
			var s = t % 60;
			var m = Math.round(t / 60);
			return this._two(m) + ':' + this._two(s);
		},
		_init: function(s){
			var self = this;
			var i = ss;
			data = s;
			var nextBtn = this._$$('nextBtn');
			var prevBtn = this._$$('prevBtn');
			dLine = this._$$('play_progress');
			var songName = this._$$('songName');
			var vol_btn = this._$$('vol_btn');
			duration = this._$$('duration');
			audio = this.ado;
			songName = this._$$('songName');
			play = this._$$('playBtn');
			if(data != ''){
				audio.setAttribute("src", data[i].src);
			}
			play.setAttribute("autobuffer", true);
			
			//歌曲播放与暂停
			function togglePlay(){
				if(data ==''){
					 console.log('亲，请选择歌曲！');
					 return false;
				}
				if(audio.paused){
					if (audio.ended) audio.currentTime = 0;
					audio.play();
					play.setAttribute("class", 'paused');
				}else{
					audio.pause();
					play.setAttribute("class", '');
				}
			};
			function botime(){
				duration.innerHTML = self._Time(0) + '/' + self._Time(0);
			}
			
			//歌曲播放与暂停
			play.addEventListener('click', function(){
					togglePlay();
			}, false);

			//声音调整
			var vol;
			vol_btn.addEventListener('click', function(){
					if(this.className == ''){
						vol = $('#pro').width();
						audio.volume = 0;
						pro.width('0')
						handle.css('left',0)
						this.setAttribute("class", 'muted');
					}else{
						handle.css('left', vol+"px");
						pro.width(vol/50 * 100 + '%')
						audio.volume = parseFloat(vol/50);
						this.setAttribute("class", '');
					}
			},false);
			function change(o,e,ow,w){
					var e = e ? e : window.event;
					if(!window.event) {e.preventDefault();}
					var tX=o.offsetLeft,
						dx=e.clientX;
					document.onmousemove=function(e){
						var e = e ? e : window.event;
						var len=tX+e.clientX-dx;
						if(len>=0 && len<=w){
							o.style.left=len+"px";
							ow.style.width=len/w * 100 + '%';
							audio.volume = parseFloat(len / 50);
						}
					}
					document.onmouseup=function(){
						document.onmousemove=null;
						document.onmouseup=null;
					}
			}
			function v_init(){
				handle = $('.handle');
				pro = $('#pro');
				sliderWidth = $('.slider').width();
				handle.css('left',"50px");
				pro.width('100%');
				audio.volume = 1;
			}
			v_init();
			$('.handle').mousedown(function(e){
				ow = self._$$('pro');
				change(this, e, ow, sliderWidth);
			});
			
			//歌曲当前播放时间与歌曲播放时间
			audio.addEventListener("timeupdate", function() {
					var s = parseInt(this.currentTime % 60);
					var m = parseInt((this.currentTime / 60) % 60);
					dLine.style.width = (this.currentTime / this.duration) * 100 + '%';
					duration.innerHTML = self._Time(this.currentTime) + '/' + self._Time(this.duration);
			}, false);
			
			//播放上一首
			function prevPlay(){
				i = top.frames['mainFrame'].getid();
				if(data =='') return false;
				botime();
				i--;
				if (i < 0)
				{	
					i = data.length-1;
				}
				audio.setAttribute("src", data[i].src);
				audio.play();
				play.setAttribute("class", 'paused');
				songName.innerHTML = data[i].name;
				top.frames['mainFrame'].list_init(data[i].sid);
			}

			//播放下一首
			function nextPlay(){
				i = top.frames['mainFrame'].getid();
				if(data =='') return false;
				botime();
				i++;
				if (i >= data.length)
				{	
					i = 0;
					
				}
				audio.setAttribute("src", data[i].src);
				audio.play();
				play.setAttribute("class", 'paused');
				songName.innerHTML = data[i].name;
				top.frames['mainFrame'].list_init(data[i].sid);
			};

			//歌曲播放完
			audio.addEventListener("ended", function() {
				botime();
				nextPlay();
			}, false);
			
			//上一首
			prevBtn.addEventListener('click', function(){
				prevPlay();
			},false);

			//下一首
			nextBtn.addEventListener('click', function(){
				nextPlay();
			},false);
		},
		songPlay: function(sid, tt, url){
			//检查歌曲重复
			var listLength = data.length;
			duration.innerHTML = this._Time(0) + '/' + this._Time(0);
			audio.setAttribute("src", url);
			songName.innerHTML = tt;
			audio.play();
			play.setAttribute("class", 'paused');
			if(listLength > 0){
				for (var i = 0; i<listLength; i++ )
				{
					if(sid == data[i].sid){return false;}
				}
			}
			data.push({sid:sid, name:tt, src:url});
		},
		clearPlay: function(){
			if(data =='') return false;
			data = [];
			audio.pause();
			audio.setAttribute("src", '');
			play.setAttribute("class", '');
			dLine.style.width = 0;
			duration.innerHTML = this._Time(0) + '/' + this._Time(0);
			songName.innerHTML = '';
		}
	};
	//初始化
	var player = new player();
	player._init(songList);

	function showPlist(){
		top.frames['mainFrame'].showPlayList();
	};

	function clearSong(){
		player.clearPlay();
	};

	function playSong(sid, tt, url){
		player.songPlay(sid, tt, url);
	};
</script>
</body>
</html>